<template>
  <div class="box">
    <div class="top">
      <h1>热门酷圈</h1>
      <p>
        <img
          src="https://img.alicdn.com/imgextra/i3/3390270589/O1CN01Gb5Gt11GDnzyC0GWz_!!3390270589.jpg"
        />更多圈子>
      </p>
    </div>
    <div class="content">
      <dl  v-for="circles in hotcircleslistdata" :key="circles.id">
        <dt>
          <img :src="circles.img" />
        </dt>
        <dd>
          <p>{{circles.title}}</p>
          <p>{{circles.des}}</p>
        </dd>
      </dl>
     
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  name: "Hottopic",
  data() {
    return {
      hotcircleslist: [],
    };
  },
  // created() {
  //   axios({
  //     url: "/hotcircleslist",
  //   }).then((res) => (this.hotcircleslist = res.data));
  // },

  created() {
    this.$store.dispatch("LINK_HOTCIR_DATA","/com/hotcircleslist")
    },
    computed:{
      hotcircleslistdata(){
        return this.$store.state.ComHotCirListM.hotcircleslist
      }
   }


};
</script>

<style scoped>
.box {
  width: 100%;
  height: 2rem;
  box-sizing: border-box;
  padding: 0.14rem;
}
.box .top {
  width: 100%;
  height: 0.75rem;
  line-height: 0.75rem;
}
.box h1 {
  font-size: 0.18rem;
  color: black;
  float: left;
}
.box .top p {
  font-size: 0.18rem;
  color: #a8a8a8;
  float: right;
}
.box .content {
  height: 1.1rem;
  display: flex;
  align-items: center;
  overflow: scroll;
}
.box .content::-webkit-scrollbar {
  display: none;
}
.content dl {
  flex-shrink: 0;
  width: 0.9rem;
  text-align: center;
  font-size: 12px;
}
.content dl img{
  width: .54rem;
  height: .54rem;
 border-radius: 50%;
}
</style>
